<template>
  <div>
    <HomePage v-show="active === 0" />
    <IMIndex v-show="active === 1" />
    <ResumeIndex v-show="active === 2" />
    <MyPage v-show="active === 3" />
    <van-tabbar v-model="active" active-color="#05A6F0" @change="onChange">
      <van-tabbar-item>
        <span>工作</span>
        <template #icon="props">
          <img src="@/assets/img/person/nav-icon/home-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/person/nav-icon/home-icon.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :badge="im_badge ==0 ? '' : im_badge">
        <span>消息</span>
        <template #icon="props">
          <img src="@/assets/img/person/nav-icon/note-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/person/nav-icon/note-icon.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>简历</span>
        <template #icon="props">
          <img src="@/assets/img/person/nav-icon/resume-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/person/nav-icon/resume-icon.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img src="@/assets/img/person/nav-icon/my-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/person/nav-icon/my-icon.png" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Toast } from "vant";
import HomePage from "./home/IndexPage.vue";
import IMIndex from "./im/IMIndex.vue";
import MyPage from "./my/IndexPage.vue";
import ResumeIndex from "./resume/ResumeIndex.vue";
import Global from "@/Global";
import { checkPersonLogin, getPersonID, switchUserType } from "@/util/session";

export default {
  name: "PersonMainPage",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Toast.name]: Toast,
    HomePage,
    MyPage,
    ResumeIndex,
    IMIndex,
  },
  mounted() {
    //计算页面上下滚动的高度，用于切换tab后自动回顶
    window.addEventListener("scroll", this.handlScroll);
    this.getIMNoRead();
		//企业发送聊天
		this.$bus.$on(Global.bus_company_im_sendmessage,()=>{
			this.getIMNoRead();
		});
		//已读聊天
		this.$bus.$on(Global.bus_person_im_message_read,()=>{
    	this.getIMNoRead();
    });
		//收到消息
		this.$bus.$on(Global.bus_pereson_im_message_receive_OutPage,()=>{
    	this.getIMNoRead();
    });

  },
  // 定义属性
  data() {
    return {
      active: 0,
      scroll: [0, 0, 0, 0],
      im_badge: 0
    };
  },
  // 方法集合
  methods: {
    handlScroll() {
      let scroll = document.documentElement.scrollTop || document.body.scrollTop;
      this.scroll[this.active] = scroll;
    },
    onChange(index) {
      this.active = index;
    },
    //获取是否有未读聊天
    getIMNoRead() {
      if (!checkPersonLogin()) return;
      this.$api.get('/PersonIM/GetUnreadCount').then(res => {
        if (res.success) {
          this.im_badge = res.response;
        }
      })
    },
  },
  watch: {
    active(val) {
			// if(val == 1){
			// 	this.getIMNoRead();
			// }
      this.$nextTick(() => {
        document.body.scrollTop = this.scroll[val];
        document.documentElement.scrollTop = this.scroll[val];
      });
    },
  },

};
</script>

<style lang="less">
</style>
